<template>
  <div class="my-circles">
    <!-- 提示 -->
    <div class="my-circles-title">
      <p>我的朋友圈</p>
      <el-button icon="el-icon-refresh" type="text" size="mini" @click="refreshCircles">刷新</el-button>
    </div>

    <div v-if="currentWeChatId && circleList.length === 0 && !retTips" class="loading-circle">
      <i class="el-icon-loading"></i>
      <span style="margin-left: 10px">正在获取朋友圈</span>
    </div>

    <!-- 没有朋友圈 -->
    <div v-if="circleList.length === 0" class="no-circles">
      <img src="../../../assets/images/circles/refresh.png" style="margin-bottom: 30px" alt="" />
    </div>

    <!-- 朋友圈列表 -->
    <ul v-else class="circles-list scroll">
      <li v-for="(circleItem, index1) in circleList" :key="index1" class="circle-item">
        <!-- 文本 -->
        <div v-if="circleItem.Content.Text" class="circle-text" v-text="circleItem.Content.Text"></div>
        <!-- 链接 -->
        <div v-if="circleItem.Content.Link" class="circle-link" title="点击打开链接" @click="openLink(circleItem)">
          <img v-if="circleItem.Content.Images" :src="circleItem.Content.Images[0].ThumbImg" alt="这是link" />
          <span v-else class="circle-link-description" v-text="'无效链接'"></span>
          <span class="circle-link-description" v-text="circleItem.Content.Link.Description"></span>
        </div>
        <!-- 图片 -->
        <div v-else-if="circleItem.Content.Images" class="circle-img">
          <img
            v-for="(img, index2) in circleItem.Content.Images"
            :key="index2"
            class="friend-circle-img"
            :class="[
              {
                'friend-circle-img-2': circleItem.Content.Images && circleItem.Content.Images.length === 2
              },
              {
                'friend-circle-img-3': circleItem.Content.Images && circleItem.Content.Images.length >= 3
              }
            ]"
            :src="img.ThumbImg"
            :alt="img.ThumbImg ? '图片地址错误' : '点击刷新获取缩略图'"
            @click="pullCircleDetailTask(img, circleItem)"
          />
        </div>
        <!-- 视频 -->
        <div v-else-if="circleItem.Content.Video" class="circle-video">
          <video class="video" controls>
            <source :src="circleItem.Content.Video.Url" type="video/mp4" />
          </video>
        </div>

        <!-- 点赞、评论、删除 -->
        <div class="time-operation">
          <!-- 时间 -->
          <span
            style="font-size: 12px; color: #b2b2b2"
            v-text="$options.filters.timeFilter(circleItem.PublishTime)"
          ></span>
          <!-- 操作 -->
          <div class="operation-btns">
            <el-button
              type="text "
              size="small"
              circle
              icon="el-icon-delete"
              title="删除"
              @click="deleteSNSNewsTask(circleItem)"
            ></el-button>
            <el-button
              type="text"
              size="small"
              circle
              icon="el-icon-star-off"
              title="点赞"
              @click="likeCircle(circleItem)"
            ></el-button>
            <el-button
              type="text"
              size="small"
              circle
              icon="el-icon-edit"
              title="评论"
              @click="circleCommentReplyTask(circleItem)"
            ></el-button>
            <el-button
              type="text"
              size="small"
              circle
              icon="el-icon-refresh"
              title="刷新"
              @click="triggerCirclePushTask(circleItem)"
            ></el-button>
          </div>
        </div>

        <!-- 显示好友点赞 -->
        <div v-if="circleItem.Likes" class="likes-box">
          <i class="fa fa-heart-o" aria-hidden="true"></i>
          <div>
            <div v-for="(like, index3) in circleItem.Likes" :key="index3">
              <img
                :src="
                  friendsMap[like.FriendId]
                    ? friendsMap[like.FriendId].Avatar
                    : require('assets/svg/conversation-image-error.svg')
                "
              />
            </div>
          </div>
        </div>

        <!-- 显示好友评论 -->
        <div v-if="circleItem.Comments" class="comment-box">
          <div v-for="(comment, index4) in circleItem.Comments" :key="index4" class="every-comment">
            <img
              :src="
                friendsMap[comment.FromWeChatId]
                  ? friendsMap[comment.FromWeChatId].Avatar
                  : require('assets/svg/conversation-image-error.svg')
              "
            />

            <div class="comment-info">
              <div class="name-time">
                <span
                  class="ellipsis"
                  v-text="
                    friendsMap[comment.FromWeChatId]
                      ? friendsMap[comment.FromWeChatId].FriendNick
                      : comment.FromWeChatId
                  "
                ></span>
                <span v-text="$options.filters.timeFilter(comment.PublishTime)"></span>
              </div>

              <div class="reply-1">
                <div class="reply-to-friend" :title="comment.Content">
                  <span v-if="comment.ToWeChatId">
                    回复
                    <span
                      class="reply-friend-name"
                      v-text="
                        friendsMap[comment.ToWeChatId] ? friendsMap[comment.ToWeChatId].FriendNick : comment.ToWeChatId
                      "
                    ></span>
                    :
                  </span>
                  <span class="comment-content" v-text="comment.Content"></span>
                </div>

                <i
                  v-if="comment.FromWeChatId === circleItem.WeChatId"
                  class="fa fa-trash"
                  aria-hidden="true"
                  title="删除"
                  @click="circleCommentDeleteTask(circleItem, comment)"
                ></i>
                <i
                  v-else
                  class="fa fa-reply"
                  aria-hidden="true"
                  title="回复"
                  @click="circleCommentReplyTask(circleItem, comment)"
                ></i>
                <i
                  v-if="comment.FromWeChatId !== circleItem.WeChatId"
                  class="fa fa-comments-o"
                  aria-hidden="true"
                  title="发起聊天"
                  @click="beginChat(circleItem, comment)"
                ></i>
              </div>
            </div>
          </div>
        </div>
      </li>
      <li v-if="retTips" class="ret-tips" v-text="retTips"></li>
      <el-button
        v-else-if="circleList.length >= 10"
        :disabled="pullCircleFlag"
        style="margin: 5px 50px"
        type="primary"
        size="small"
        :loading="pullCircleFlag"
        @click="queryCircleListNext"
      >
        点击加载更多数据
      </el-button>
    </ul>

    <!-- 大图 -->
    <div id="bigImage" class="demo-image__preview big-img-box">
      <el-image
        id="bigImageBox"
        style="width: 100px; height: 100px"
        :src="bigImageUrl"
        :preview-src-list="[bigImageUrl]"
      ></el-image>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import {
  PullFriendCircleTask,
  DeleteSNSNewsTask,
  CircleLikeTask,
  PullCircleDetailTask,
  TriggerCirclePushTask,
  CircleCommentReplyTask,
  CircleCommentDeleteTask
} from '@/api/webSocketApi'

export default {
  name: 'MyCircle',
  data() {
    return {
      pullCircleFlag: false,
      bigImageUrl: 'https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png' // 大图的地址
    }
  },
  computed: {
    ...mapGetters({
      circleList: 'conversation/circleList', // 朋友圈列表
      retTips: 'conversation/retTips', // 朋友圈列表
      friendsMap: 'nedb/friendsMap',
      currentWeChatId: 'conversation/currentWeChatId'
    })
  },
  watch: {
    // 监听微信改变
    currentWeChatId() {
      this.clearCircles()
      this.queryCircleList()
    }
  },
  mounted() {
    this.queryCircleList()
  },
  beforeDestroy() {
    this.clearCircles()
  },
  methods: {
    // 获取更多的朋友圈
    queryCircleList() {
      if (!this.currentWeChatId) return
      PullFriendCircleTask(this.currentWeChatId, this.currentWeChatId, 0)
    },
    // 刷新数据
    refreshCircles() {
      this.clearCircles()
      this.queryCircleList()
    },
    // 清空好友的朋友圈数据
    clearCircles() {
      this.$store.commit('conversation/SET_RETTIPS', '')
      this.$store.commit('conversation/RESET_CIRCLE_LIST')
    },
    // 任务下发提示
    messageTip(mc, mt) {
      this.$message({
        type: mt || 'info',
        message: mc || '任务已发出，请等候执行！',
        duration: 1000
      })
    },
    // 点赞
    likeCircle(circle) {
      this.messageTip()
      let cancelFlag = false
      if (circle.Likes) {
        for (const like of circle.Likes) {
          if (like.FriendId === this.currentWeChatId) {
            cancelFlag = true
            break
          }
        }
      }
      const { CircleId } = circle
      CircleLikeTask(this.currentWeChatId, CircleId, cancelFlag, '')
    },
    // 刷新指定朋友圈
    triggerCirclePushTask(circle) {
      this.messageTip()
      TriggerCirclePushTask(this.currentWeChatId, [circle.CircleId])
    },
    // 评论
    circleCommentReplyTask(circle, comment) {
      this.$prompt('请输入评论内容', '评论', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputPattern: /\S{1,500}/,
        inputErrorMessage: '评论字数1-500'
      })
        .then(({ value }) => {
          this.messageTip()
          let toWeChatId = ''
          let replyCommentId = ''
          if (comment) {
            toWeChatId = comment.FromWeChatId
            replyCommentId = comment.CommentId
          }
          CircleCommentReplyTask(this.currentWeChatId, circle.CircleId, value, toWeChatId, replyCommentId)
        })
        .catch(() => {})
    },
    // 删除评论
    circleCommentDeleteTask(circle, comment) {
      console.log(circle)
      if (!comment.CommentId) return

      this.$confirm('确认删除该评论 ?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.messageTip()
          CircleCommentDeleteTask(this.currentWeChatId, circle.CircleId, comment.CommentId)
        })
        .catch(() => {})
    },
    // 删除指定朋友圈
    deleteSNSNewsTask(circle) {
      this.$confirm('确认删除该朋友圈 ?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.messageTip()
          DeleteSNSNewsTask(this.currentWeChatId, circle.CircleId)
        })
        .catch(() => {})
    },
    // 下一页
    queryCircleListNext() {
      if (!this.currentWeChatId) {
        this.$alert('请先选中一个微信！', '提示', { type: 'warning' })
        return
      }
      let refId = 0
      const cl = this.circleList.length - 1
      if (cl <= 0) return
      this.messageTip('正在获取更多数据,请稍等!', 'warning')
      if (this.circleList[cl]) {
        refId = this.circleList[cl].CircleId
      }
      if (refId !== 0) {
        PullFriendCircleTask(this.currentWeChatId, this.currentWeChatId, refId)
      }
      this.pullCircleFlag = true
      let pcf = setTimeout(() => {
        this.pullCircleFlag = false
        clearTimeout(pcf)
        pcf = null
      }, 2000)
    },
    // 朋友圈链接 ok
    openLink(circle) {
      const url = circle.Content.Link.Url
      const a = document.createElement('a')
      a.setAttribute('href', url)
      a.setAttribute('target', '_blank')
      a.setAttribute('id', 'js_a')
      // 防止反复添加
      if (document.getElementById('js_a')) {
        document.body.removeChild(document.getElementById('js_a'))
      }
      document.body.appendChild(a)
      a.click()
    },
    // 获取缩略图 ok
    pullCircleDetailTask(img, circle) {
      if (img.Url) {
        // 展示大图
        console.log('有大图', img.Url)
        this.bigImageUrl = img.Url
        const imgDom = document.getElementById('bigImageBox')
        setTimeout(() => {
          if (imgDom) {
            imgDom.click()
          }
        }, 100)
      } else {
        this.messageTip('正在获取图片详情，请稍后再试!')
        PullCircleDetailTask(this.currentWeChatId, circle.CircleId, false)
      }
    },
    // 跳转到聊天
    beginChat(circle, comment) {
      const friendId = comment.FromWeChatId
      let friendInfo = {
        FriendId: friendId,
        WeChatId: circle.WeChatId
      }
      if (this.friendsMap[friendId]) {
        friendInfo = this.friendsMap[friendId]
      }
      this.$store.commit('conversation/SET_CURRENT_FRIENDS', friendInfo)
      this.$router.replace({ name: 'conversation' })
    }
  }
}
</script>

<style lang="scss" scoped>
.big-img-box {
  position: absolute;
  top: 0;
  right: -200px;
}
.my-circles {
  width: 330px;
  min-width: 330px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border-right: solid $border-color-base 1px;

  .my-circles-title {
    display: flex;
    align-items: center;
    p {
      padding: 10px;
      color: #333333;
      font-size: 14px;
      font-weight: 600;
    }
  }

  .loading-circle {
    height: 40px;
    line-height: 40px;
    align-self: center;
  }

  .no-circles {
    flex: 1 1 auto;
    overflow: auto;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .circles-list {
    flex: 1 1 auto;
    overflow: auto;
    display: flex;
    padding: 10px;
    flex-direction: column;

    .li-loading {
      width: 100%;
      height: 30px;
      line-height: 30px;
      text-align: center;
      color: #409eff;
    }
    .li-btn {
      width: 100%;
      height: 60px;
      line-height: 60px;
      text-align: center;
    }
  }
}
</style>
